<template>
  <!-- 文章列表 -->
  <view>
    <view class="articleList" :style="[boxStyle]" v-if="articleList.length">
      <view v-if="listStyle">
        <navigator :url='"/pages/goods/news_details/index?id="+item.id' hover-class='none' :style="[itemStyle]"
                   v-if="item.status" v-for="(item,index) in articleList" :key='index'
                   class="item acea-row row-between-wrapper">
          <view class="pictrue">
            <easy-loadimage :image-src="item.cover" :radius="dataConfig.contentStyle.val"></easy-loadimage>
          </view>
          <view class="text">
            <view class="name line2" :style="[titleColor]">{{ item.title }}</view>
            <view class="time" :style="[timeColor]">{{ item.createTime }}</view>
          </view>
        </navigator>
      </view>
      <view v-else>
        <navigator v-if="item.status" :url='"/pages/goods/news_details/index?id="+item.id' hover-class='none'
                   :style="[itemStyle]" v-for="(item,index) in articleList" :key='index'
                   class="item acea-row row-between-wrapper">
          <view class="text">
            <view class="name line2" :style="[titleColor]">{{ item.title }}</view>
            <view class="time" :style="[timeColor]">{{ item.createTime }}</view>
          </view>
          <view class="pictrue">
            <easy-loadimage :image-src="item.cover" :radius="dataConfig.contentStyle.val"></easy-loadimage>
          </view>
        </navigator>
      </view>
    </view>
  </view>
</template>
<script>
import easyLoadimage from '@/components/base/easy-loadimage.vue';

export default {
  name: 'homeArticle',
  props: {
    dataConfig: {
      type: Object,
      default: () => {
      }
    },
  },
  data() {
    return {}
  },
  components: {
    easyLoadimage
  },
  computed: {
    //布局样式
    listStyle() {
      return this.dataConfig.layoutConfig.tabVal === 0
    },
    //文章分类
    articleList() {
      return this.dataConfig.selectConfig.articleList
    },
    //最外层盒子的样式
    boxStyle() {
      return {
        borderRadius: this.dataConfig.bgStyle.val * 2 + 'rpx',
        background: `linear-gradient(${this.dataConfig.bgColor.color[0].item}, ${this.dataConfig.bgColor.color[1].item})`,
        margin: this.dataConfig.mbConfig.val * 2 + 'rpx' + ' ' + this.dataConfig.lrConfig.val * 2 + 'rpx' +
            ' ' + 0,
        padding: this.dataConfig.upConfig.val * 2 + 'rpx' + ' ' + 0 + ' ' + this.dataConfig.downConfig.val *
            2 + 'rpx'
      }
    },
    //文章间距
    itemStyle() {
      return {
        'margin-bottom': this.dataConfig.contentConfig.val * 2 + 'rpx'
      }
    },
    //时间颜色
    timeColor() {
      return {
        'color': this.dataConfig.timeColor.color[0].item
      }
    },
    //标题颜色
    titleColor() {
      return {
        'color': this.dataConfig.titleColor.color[0].item
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.articleList {

  .item {
    padding: 0 20rpx;

    &:last-child {
      margin-bottom: 0 !important;
    }

    .text {
      width: 60%;

      .name {
        font-size: 30rpx;
        color: #282828;
        height: 82rpx;
      }

      .time {
        font-size: 24rpx;
        color: #999;
        margin-top: 40rpx;
      }
    }

    .pictrue {
      width: 37%;
      height: 156rpx;
      border-radius: 6rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 6rpx;
      }
    }
  }
}
</style>